<template>
  <div class="backStage">
    <div class="notice">
      <noticeBase></noticeBase>
    </div>
    <div class="showContent">
      <ul class="left" :style="navPosition" ref="tabNavs">
        <li class="tabs" @click="goWhere(item.route)" v-for="(item, index) in navArr" :class="{'active': $route.path.indexOf(item.route) >= 0}" :key="index">
          <i class="icons" :class="item.iconImg ? (item.iconImg + ($route.path.indexOf(item.route) >= 0 ? 'A' : '')) : item.icon"></i>
          <span>{{ item.name }}</span>
        </li>
        <li class="helpBase">
          <helpBase></helpBase>
        </li>
        <!-- <li class="help">
          <a href="../../../static/html/help.html" target="_blank">
            <i class="el-icon-question"></i>
            <p>帮助中心</p>
          </a>
        </li>
        <li class="server" @mouseover="showServer=true" @mouseout="showServer=false">
          <h6>联系客服</h6>
          <p>上班时间
            <br> 9:00-18:00
          </p>
          <img class="img-s" :src="logoObj.servicePic || initImg" alt="联系客服">
          <transition name="el-fade-in-linear">
            <img v-show="showServer" class="img-l" :src="logoObj.servicePic || initImg" alt="客服微信">
          </transition>
        </li> -->
      </ul>
      <div class="right" :style="scrollBoxStyle" ref="scrollBox">
        <router-view ref="showRouteBox"></router-view>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { stageArr } from '../../assets/js/common'
import NoticeBase from '../base/noticeBase/noticeBase'
import HelpBase from '@/components/base/helpBase/helpBase'
export default {
  name: 'backStage',
  components: {
    NoticeBase,
    HelpBase
  },
  computed: {
    // navPosition () {
    //   let dom = this.$refs.tabNavs
    //   let top = dom.offsetTop
    //   let left = dom.offsetLeft
    //   return `top:${top};left:${left}`
    // }
  },
  data () {
    return {
      navArr: stageArr,
      showServer: false,
      initImg: require('../../assets/images/weiCode.png'),
      logoObj: {},
      navPosition: '',
      scrollBoxStyle: ''
    }
  },
  methods: {
    goWhere (route) {
      if (this.$route.name === route) {
        window.location.reload()
      } else {
        this.$router.push({ name: route })
      }
    },
    setTabNavPosition () {
      let dom = this.$refs.tabNavs
      let top = dom.offsetTop
      let left = dom.offsetLeft
      let navWidth = dom.offsetWidth
      console.log('%O', dom)
      this.navPosition = `position:fixed;top:${top}px;left:${left}px;`
      this.scrollBoxStyle = `position:absolute;top:${top}px;left:${left + navWidth + 20}px;`
      // this.$nextTick(() => {
      // dom.style.position = 'fixed'
      // dom.style.top = top
      // dom.style.left = left
      // })
      // dom.setAttribute('position', 'fixed')
      // dom.setAttribute('top', top)
    }
  },
  mounted () {
    // this.setTabNavPosition()
    // if (sessionStorage.getItem('__logoInfo__')) {
    //   this.logoObj = JSON.parse(sessionStorage.getItem('__logoInfo__'))
    // }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/index.styl'
.backStage
  width 100%
  height 100%
  box-sizing border-box
  padding 10px 0
  background #ffffff
  display flex
  flex-direction column
  .notice
    // margin 0 0 10px
    max-width 1450px
    width 1450px
    text-align left
    margin 0 auto
    margin-bottom 20px
  .showContent
    flex 1
    display flex
    justify-content center
    overflow hidden
    // position relative
    z-index 1
    .left
      width 162px
      min-width 162px
      margin-right 20px
      box-sizing border-box
      position relative
      border-right 1px solid #DDDDDD
      .tabs
        // padding 20px 0 20px 25px
        fontSize($fontSize-m, 40px, $fontColor)
        cursor pointer
        margin-bottom 15px
        transition all 0.2s
        // border-bottom 1px solid #E3E3E3
        &:hover
          color $buttonBg
        &:first-child
          // border-top 1px solid #E3E3E3
        i
          margin-right 10px
        span
          font-weight 500
      .help
        width 90px
        margin 0 auto
        text-align center
        cursor pointer
        margin-top 100px
        i
          font-size 30px
        p
          font-size 14px
        a
          text-decoration none
          color #ff3341
          transition all 0.2s
          &:hover
            color #ff3341
      .helpBase
        // margin 20px auto
      .server
        position relative
        width 90px
        margin 0 auto
        margin-top 20px
        text-align center
        padding 8px 10px
        background rgba(32, 32, 32, 0.05)
        h6
          fontSize($fontSize, 20px, $fontColor)
        p
          fontSize(10px, 18px, $fontColor-gray)
          letter-spacing 1px
        .img-s
          width 70px
          // height 70px
        .img-l
          position absolute
          background #ffffff
          z-index 999
          bottom 0
          left 110px
          width 200px
          // height 200px
      .active
        color $mainColor
        border-right 2px solid $buttonBg
    .right
      width calc(100% - 192px)
      max-width 1260px
      overflow auto
      padding-right 20px
      box-sizing border-box
    ::-webkit-scrollbar
      width 8px
      height 10px
      display block
    ::-webkit-scrollbar-thumb
      border-radius 4px
      background RGBA(136, 136, 136, 0.1)
      &:hover
        background RGBA(136, 136, 136, 0.4)
.icons
  display inline-block
  width 14px
  height 15px
  // line-height 1
  vertical-align middle
  // background-size 100%
.homeIcon
  background url('../../assets/icon/主页_icon.png') no-repeat
  background-size 100% 100%
.homeIconA
  background url('../../assets/icon/主页_icon_prs.png') no-repeat
  background-size 100% 100%
.shopsIcon
  background url('../../assets/icon/商城_icon.png') no-repeat
  background-size 100% 100%
.shopsIconA
  background url('../../assets/icon/商城_icon_prs.png') no-repeat
  background-size 100% 100%
.shopNowIcon
  background url('../../assets/icon/下单_icon.png') no-repeat
  background-size 100% 100%
.shopNowIconA
  background url('../../assets/icon/下单_icon_prs.png') no-repeat
  background-size 100% 100%
.orderMangerIcon
  background url('../../assets/icon/订单_icon.png') no-repeat
  background-size 100% 100%
.orderMangerIconA
  background url('../../assets/icon/订单_icon_prs.png') no-repeat
  background-size 100% 100%
.searchIcon
  background url('../../assets/icon/主页_icon.png') no-repeat
  background-size 100% 100%
.searchIconA
  background url('../../assets/icon/主页_icon_prs.png') no-repeat
  background-size 100% 100%
</style>
